<!-- Created by henian.xu on 2018/11/15. -->

<template>
    <div class="paginate">
        <div
            :class="['item',{disabled:!isPrev}]"
            @click="onPrev"><i class="f-icon">&#xf104;</i></div>
        <div
            :class="['item',{active:item.action===currentPage}]"
            v-for="item in options"
            :key="item.action"
            @click="onItem(item.action)">{{ item.label }}</div>
        <div
            :class="['item',{disabled:!isNext}]"
            @click="onNext"><i class="f-icon">&#xf105;</i></div>
    </div>
</template>

<script>
export default {
    name: 'Paginate',
    data() {
        return {};
    },
    props: {
        value: {
            type: Number,
            default: 1,
        },
        /*currentPage: {
            type: Number,
            default: 1,
        },*/
        pageSize: {
            type: Number,
            default: 10,
        },
        totalPages: {
            type: Number,
            default: 0,
        },
        totalRows: {
            type: Number,
            default: 0,
        },
        pagerCount: {
            type: Number,
            default: 5,
        },
    },
    computed: {
        currentPage: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
        isPrev() {
            return this.currentPage > 1;
        },
        isNext() {
            return this.currentPage < this.totalPages;
        },
        options() {
            let res = [];
            const { currentPage, totalPages } = this;
            let pagerCount = this.pagerCount;
            if (!(pagerCount % 2)) pagerCount++;
            if (!totalPages) return res;
            const count = Math.min(pagerCount, totalPages);
            if (pagerCount >= totalPages) {
                res = Array(count)
                    .fill(1)
                    .map((item, i) => ({ label: i + 1, action: i + 1 }));
            } else {
                const half = ~~(pagerCount / 2);
                let first = currentPage - half < 1 ? 1 : currentPage - half;
                if (first + count > totalPages) {
                    first += totalPages + 1 - (first + count);
                }
                res = Array(count)
                    .fill(1)
                    .map((item, i) => ({ label: i + first, action: i + first }));

                const middle = half + 1;
                if (currentPage > middle) {
                    // 添加前 ... 按钮
                    res.unshift({
                        label: '...',
                        action: currentPage - pagerCount < 1 ? 1 : currentPage - pagerCount,
                    });
                }
                if (currentPage + half < totalPages) {
                    // 添加前 ... 按钮
                    res.push({
                        label: '...',
                        action: currentPage + pagerCount > totalPages ? totalPages : currentPage + pagerCount,
                    });
                }
            }
            return res;
        },
    },
    methods: {
        onItem(action) {
            this.currentPage = action;
        },
        onPrev() {
            if (!this.isPrev) return;
            this.currentPage--;
        },
        onNext() {
            if (!this.isNext) return;
            this.currentPage++;
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.paginate {
    display: inline-block;
    @include clearfix;
    > .item {
        float: left;
        min-width: $form-item-height;
        height: $form-item-height;
        line-height: $form-item-height - 2;
        border: 1px solid $color-border;
        text-align: center;
        border-radius: 5px;
        user-select: none;
        cursor: pointer;

        + .item {
            margin-left: $margin;
        }

        &.active {
            border-color: $color-main;
            background-color: $color-main;
            color: #fff;
        }
        &.disabled {
            border-color: $gray3;
            background-color: $gray2;
            color: #fff;
        }
    }
}
</style>
